<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        div{
            width: 300px;
            height: 205px;
            /* background-color: skyblue; */
            margin: auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
        }
       ul{
           width: 0px;
            position: absolute;
            top: 0px;
            left:-1800px;

       }
        ul li{
            list-style: none;
            float: left;
            width: 300px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            
        }
    </style>
</head>
<body>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <div class="banner">
        <ul>
            <li style="background-color: rebeccapurple;">元素五</li>
            <li style="background-color: springgreen;">元素一</li>
            <li style="background-color:orange">元素二</li>
            <li style="background-color: green;">元素三</li>
            <li style="background-color: pink;">元素四</li>
            <li style="background-color: rebeccapurple;">元素五</li>
            <li style="background-color: springgreen;">元素一</li>
        </ul>
        
    </div>
    <script>
        //移动
        function banner(){
            let sd=1000//移动的px
            let mdd=300//移动多少
            let time=100//多少时间毫秒
            let thisyd=parseInt($('ul').css('left'))  //当前的位置
            let goal = thisyd +  mdd//目标位置
            let distance =mdd * time / sd//每次移动距离
            let ulw=parseInt($('li').css('width'))*$('ul>li').length//ul的宽度
            // console.log(parseInt($('li').css('width'))*$('ul>li').length);
            $('ul').css('width',`${ulw}px`)
          

         let set=setInterval(function(){

                thisyd=parseInt($('ul').css('left'))  //当前的位置

                 console.log(thisyd);

              

                if((Math.abs(goal)-Math.abs(thisyd))<distance){
                    $('ul').css('left',`${goal}px`)
                    if( Math.abs(goal) ==(ulw-parseInt($('li').css('width')))){
                        console.log(goal)
                        $('ul').css('left','-300px')
                    }  
                    clearInterval(set)
                }

                $('ul').css('left',`${thisyd + distance}px`)  
                
            },time) 
        }
        banner()

       setInterval(function(){

        banner()
       },2000)
        

    </script>
    
</body>
</html>